
<template>
    <div class="detail">
        <headView></headView>
        <div class="header">
            <div class="lef">
                <div class="goods-img">
                    <div class="event"></div>
                    <div class="bigImg" @mouseover="over" @mouseout="out">
                        <div class="move" ref="move"></div>
                        <img :src="detailList.mainPictures[curIndex]" alt="" class="bigPic">
                    </div>
                    <ul class="smallImg">
                        <li v-for="item, index in detailList.mainPictures" :key="index" @mouseover="mouseover(index)">
                            <img class="smallPic" :src="item" alt="">
                        </li>
                    </ul>
                    <div class="picbox" ref="picbox">
                        <img :src="detailList.mainPictures[curIndex]" class="pic" ref="big">
                    </div>
                </div>
                <ul class="descbox">
                    <li data-v-ca3db56a="">
                        <p data-v-ca3db56a="">销量人气</p>
                        <p data-v-ca3db56a="">200+</p>
                        <p data-v-ca3db56a=""><i class="iconfont icon-task-filling" data-v-ca3db56a=""></i>销量人气</p>
                    </li>
                    <li data-v-ca3db56a="">
                        <p data-v-ca3db56a="">商品评价</p>
                        <p data-v-ca3db56a="">400+</p>
                        <p data-v-ca3db56a=""><i class="iconfont icon-comment-filling" data-v-ca3db56a=""></i>查看评价</p>
                    </li>
                    <li data-v-ca3db56a="">
                        <p data-v-ca3db56a="">收藏人气</p>
                        <p data-v-ca3db56a="">600+</p>
                        <p data-v-ca3db56a=""><i class="iconfont icon-favorite-filling" data-v-ca3db56a=""></i>收藏商品</p>
                    </li>
                    <li data-v-ca3db56a="">
                        <p data-v-ca3db56a="">品牌信息</p>
                        <p data-v-ca3db56a="">苏宁电器</p>
                        <p data-v-ca3db56a=""><i class="iconfont icon-dynamic-filling" data-v-ca3db56a=""></i>品牌主页</p>
                    </li>
                </ul>
            </div>
            <div class="rig">
                <p class="name">{{ detailList.name }}</p>
                <p class="desc">{{ detailList.desc }}</p>
                <p class="price">
                    <span class="new_price">{{ detailList.price }}</span>
                    <span class="old_price">{{ detailList.oldPrice }}</span>
                </p>
                <div class="service">
                    <dl data-v-af785f8a="">
                        <dt data-v-af785f8a="">促销</dt>
                        <dd data-v-af785f8a="">12月好物放送，App领券购买直降120元</dd>
                    </dl>
                    <dl data-v-af785f8a="">
                        <dt data-v-af785f8a="">配送</dt>
                        <dd data-v-af785f8a="">
                            <b data-v-af785f8a=""
                                style="vertical-align: middle; padding-right: 5px; font-weight: normal;">至</b>
                            <div class="xtx-city" data-v-29c2cd1e="" data-v-af785f8a="">
                                <div class="select" data-v-29c2cd1e="">
                                    <span class="value" data-v-29c2cd1e="">北京市 市辖区 东城区</span>
                                    <i class="iconfont icon-angle-down" data-v-29c2cd1e=""></i>
                                </div>
                                <!---->
                            </div>
                        </dd>
                    </dl>
                    <dl data-v-af785f8a="">
                        <dt data-v-af785f8a="">服务</dt>
                        <dd data-v-af785f8a="">
                            <span class="fw">无忧退货</span>
                            <span class="fw">快速退款</span>
                            <span class="fw">免费包邮</span>
                            <a href="javascript:;" data-v-af785f8a="">了解详情</a>
                        </dd>
                    </dl>
                </div>
                <div class="goods-sku">
                    <dl>
                        <dt>规格</dt>
                        <dd>
                            <span class="gg">盖碗1+杯*2</span>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import headView from "../../components/HeadView.vue";
export default {
    components: {
        headView,
    },
    data() {
        return {
            detailList: [],
            curIndex: 0,
            show: false,
            currentIndex: 0,
        };
    },
    computed: {
    },
    mounted() {
        this.$api.a(this.$route.query.detailId).then(res => {
            this.detailList = res.data.result
            console.log(res)
        }).catch(err => {
            console.log(err)
        })
    },
    methods: {
        mouseover(e) {
            this.curIndex = e
        },
        over() {
            this.show = true
        },
        out() {
            this.show = false
        },
    },
};
</script>
  
<style lang="scss" scoped>
.detail {
    width: 100vw;
    height: 100vh;
    background: #f5f5f5;

    .header {
        width: 1240px;
        height: 600px;
        background: #fff;
        margin: 115px auto 0;
        display: flex;

        .lef {
            width: 480px;
            height: 540px;
            padding: 30px 50px;
            display: flex;
            flex-wrap: wrap;

            .goods-img {
                width: 480px;
                height: 400px;
                position: relative;
                display: flex;
                z-index: 500;
                flex-wrap: wrap;

                .bigImg {
                    width: 400px;
                    height: 400px;
                    position: relative;

                    .move {
                        width: 200px;
                        height: 200px;
                        left: 0;
                        top: 0;
                        position: absolute;
                        background: rgba(0, 0, 0, .5);

                    }

                    .bigPic {
                        width: 400px;
                        height: 400px;
                        background: #F5F5F5;
                    }

                    .mask {
                        width: 50%;
                        height: 50%;
                        background-color: rgba(171, 250, 171, 0.3);
                        position: absolute;
                        left: 0;
                        top: 0;
                        display: none;
                    }
                }

                .picbox {
                    width: 400px;
                    height: 400px;
                    position: absolute;
                    left: 410px;
                    top: 0px;
                    overflow: hidden;

                    .pic {
                        width: 1200px;
                        height: 1200px;
                        display: block;
                        background: #F5F5F5;
                    }
                }

                .smallImg {
                    width: 80px;

                    li {
                        width: 68px;
                        height: 68px;
                        margin-left: 12px;
                        margin-bottom: 15px;
                        cursor: pointer;

                        .smallPic {
                            width: 68px;
                            height: 68px;
                            border: 2px solid transparent
                        }
                    }

                    li:hover img {
                        width: 65px;
                        height: 65px;
                        border: 2px solid red;
                    }
                }
            }

            .descbox {
                display: flex;
                width: 400px;
                align-items: center;
                text-align: center;
                height: 140px;
                font-size: 14px;

                li {
                    flex: 1;
                    position: relative;

                    p:first-child {
                        color: #999;
                    }

                    p:nth-child(2) {
                        color: #cf4444;
                        margin-top: 10px;
                    }

                    p:last-child {
                        color: #666;
                        margin-top: 10px;
                    }

                    p:last-child i::before {
                        color: #27ba9b;
                        font-size: 14px;
                        margin-right: 2px;
                    }
                }
            }
        }

        .rig {
            flex: 1;
            padding: 30px 30px 30px 0;

            .name {
                font-size: 22px;
            }

            .desc {
                color: #999;
                margin-top: 10px;
            }

            .price {
                margin-top: 10px;

                .new_price {
                    color: #cf4444;
                    margin-right: 10px;
                    font-size: 22px;
                }

                .old_price {
                    color: #999;
                    text-decoration: line-through;
                    font-size: 16px;
                }

                span:before {
                    content: "¥";
                    font-size: 14px;
                }
            }

            .service {
                background: #f5f5f5;
                width: 500px;
                padding: 20px 10px 0 10px;
                margin-top: 10px;

                dl {
                    padding-bottom: 20px;
                    display: flex;
                    align-items: center;

                    dt {
                        width: 50px;
                        color: #999;
                    }

                    dd {
                        font-size: 14px;
                        color: #666;
                        display: flex;

                        span {
                            margin-right: 10px;
                        }

                        .fw:before {
                            content: "•";
                            color: rgb(39, 186, 155);
                            margin-right: 2px;
                        }

                        a {
                            color: #27ba9b;
                            text-decoration: none;
                        }
                    }
                }
            }

            .goods-sku {
                padding-left: 10px;
                padding-top: 20px;

                dl {
                    display: flex;
                    padding-bottom: 10px;
                    align-items: center;

                    dt {
                        width: 50px;
                        color: #999;

                        dd {
                            flex: 1;
                            color: #666;
                            line-height: 40px;

                            .gg {
                                display: inline-block;
                                height: 30px;
                                line-height: 28px;
                                padding: 0 20px;
                                border: 1px solid #ccc;
                                margin-right: 10px;
                                cursor: pointer;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
  
  